<template>
    <div class="category-container">
        <el-table
            :data="table_data"
            border
            stripe
            element-loading-text="拼命加载中"
            v-loading="loading"
        >
            <el-table-column prop="id" label="id" width="50" />
            <el-table-column prop="name" label="分类名称" width="100" />
            <el-table-column prop="c_items" label="子类">
                <template slot-scope="scope">
                    <el-tag
                        type="success"
                        v-for="tag in scope.row.c_items"
                        :key="tag"
                    >
                        {{ tag }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        class="edit-btn"
                        darken
                        size="mini"
                        @click="toggle_edit(scope.$index, scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        type="danger"
                        darken
                        size="mini"
                        @click="handle_del(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-button @click="toggle_add" class="add-btn" type="success"
            >添加分类</el-button
        >
        <el-dialog
            :title="is_edit ? '编辑分类' : '添加分类'"
            :visible.sync="dialog_visible"
            width="700px"
            :close-on-click-modal="false"
            :center="true"
        >
            <el-form
                :model="form_data"
                label-width="80px"
                :rules="rules"
                ref="form"
            >
                <el-form-item label="id" prop="id">
                    <el-input
                        :readonly="is_edit ? true : false"
                        v-model.number="form_data.id"
                        placeholder="请填写唯一 id"
                    ></el-input>
                </el-form-item>
                <el-form-item label="分类名称" prop="name">
                    <el-input
                        v-model="form_data.name"
                        placeholder="请填写类名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="子类名">
                    <el-select
                        style="width: 100%"
                        v-model="form_data.c_items"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        placeholder="请添加子类名"
                    >
                        <el-option
                            v-for="item in form_data.c_items"
                            :key="item"
                            :label="item"
                            :value="item"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    v-if="is_edit"
                    type="primary"
                    @click="handle_edit"
                    size="small"
                >
                    修 改
                </el-button>
                <el-button
                    v-else
                    @click="handle_add"
                    size="small"
                    type="success"
                    >添 加</el-button
                >
                <el-button
                    @click="dialog_visible = false"
                    size="small"
                    style="margin-left: 30px"
                    type="info"
                    >取 消</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    add_category,
    del_category,
    edit_category,
    search_category
} from "@/api"

export default {
    created() {
        this.loading = true
        search_category().then((resp) => {
            this.table_data = resp.data
            this.loading = false
        })
    },
    data() {
        return {
            table_data: [],
            loading: false,
            form_data: {},
            dialog_visible: false,
            is_edit: true,
            rules: {
                id: [
                    { required: true, message: "请填写 id", trigger: "blur" },
                    { type: "number", message: "请填写数字", trigger: "blur" }
                ],
                name: [
                    { required: true, message: "请填写类名", trigger: "blur" }
                ]
            }
        }
    },
    methods: {
        toggle_edit(index, row) {
            this.is_edit = true
            this.form_data = row
            this.dialog_visible = true
        },
        toggle_add(index, row) {
            this.is_edit = false
            this.form_data = { c_items: [] }
            this.dialog_visible = true
        },
        handle_del(index, row) {
            this.$confirm(`确认删除 ${row.name} ?`, "删除", {
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                del_category(row.id).then(() => {
                    this.table_data.splice(index, 1)
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    })
                })
            })
        },
        handle_edit() {
            edit_category(this.form_data).then(() => {
                this.$message({
                    message: "修改成功",
                    type: "success"
                })
                this.$refs.form.clearValidate()
                this.dialog_visible = false
            })
        },
        handle_add() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    add_category(this.form_data)
                        .then(() => {
                            this.$message({
                                message: "添加成功",
                                type: "success"
                            })
                            this.$refs.form.clearValidate()
                            this.dialog_visible = false
                        })
                        .catch((err) => {
                            this.$message({
                                message: err,
                                type: "error"
                            })
                        })
                }
            })
        }
    }
}
</script>

<style lang="less">
.category-container {
    .el-tag {
        margin: 4px 7px;
    }
    .add-btn {
        margin: 30px auto 0;
        display: block;
    }
    .el-dialog .el-tag {
        color: #67c23a;
        &:hover {
            border-color: #67c23a;
        }
    }
}
</style>
